<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加油站管理系统注册</title>
    <style>
        /* 全局样式设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", sans-serif;
        }

        /* 页面背景设置 - 透明度0.5 */
        body {
            background: url("/images/2.jpg") no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative;
        }

        /* 背景透明度遮罩层 */
        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0);
            z-index: -1;
        }

        /* 注册容器样式 */
        .register-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 注册框主体样式 */
        .register-box {
            width: 390px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            backdrop-filter: blur(5px);
        }

        /* 标题栏样式 - 保持与登录页一致的红色半透明 */
        .title {
            background-color: rgba(255, 0, 0, 0.5);
            color: #fff;
            padding: 15px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }

        /* 表单区域样式 */
        .register-box form {
            padding: 25px;
        }

        /* 标签样式 */
        .register-box form label {
            display: block;
            margin: 12px 0 6px;
            font-weight: bold;
            color: #0e0e0e;
        }

        /* 输入框样式 */
        .register-box form input[type="text"],
        .register-box form input[type="date"],
        .register-box form input[type="time"],
        .register-box form input[type="password"],
        .register-box form select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
            background-color: rgba(255, 255, 255, 0.8);
        }

        .register-box form input:focus,
        .register-box form select:focus {
            border-color: #d6dde5;
            outline: none;
            background-color: #fff;
        }

        /* 性别选择样式 */
        .gender-group {
            display: flex;
            gap: 20px;
            margin: 6px 0 12px;
        }
        .gender-group label {
            display: flex;
            align-items: center;
            font-weight: normal;
            margin: 0;
        }
        .gender-group input {
            margin-right: 5px;
            width: auto; /* 覆盖全局input宽度 */
        }

        /* 密码提示样式 */
        .password-hint {
            font-size: 12px;
            height: 16px;
            margin: 4px 0 8px;
        }
        .hint-error {
            color: red;
        }
        .hint-success {
            color: green;
        }

        /* 日期时间组合样式 */
        .datetime-group {
            display: flex;
            gap: 10px;
        }

        .datetime-group input {
            flex: 1;
        }

        .format-hint {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
            margin-bottom: 8px;
        }

        /* 注册按钮样式 */
        .register-box form input[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: rgba(255, 0, 0, 0.7);
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            margin-top: 15px;
            transition: background-color 0.3s;
        }

        .register-box form input[type="submit"]:hover {
            background-color: rgba(200, 0, 0, 0.8);
        }
        .register-box form input[type="submit"]:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        /* 登录链接样式 */
        .login-link {
            text-align: center;
            margin-top: 15px;
            color: #0e0e0e;
        }

        .login-link a {
            color: #1773d0;
            text-decoration: none;
            font-weight: bold;
        }

        .login-link a:hover {
            text-decoration: underline;
            color: #0d4b87;
        }
    </style>
</head>

<body>
<div class="register-container">
    <div class="register-box">
        <div class="title">加油站管理系统注册</div>
        <form action="/user/register" method="post" id="registerForm">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="employeeName" required placeholder="请输入姓名">

            <!-- 新增性别字段 -->
            <label>性别：</label>
            <div class="gender-group">
                <label>
                    <input type="radio" name="gender" value="男" required> 男
                </label>
                <label>
                    <input type="radio" name="gender" value="女" required> 女
                </label>
            </div>

            <!-- 新增密码字段 -->
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">

            <!-- 新增确认密码字段 -->
            <label for="confirmPassword">确认密码：</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="请再次输入密码">
            <div class="password-hint" id="passwordHint"></div>

            <label for="position">职位：</label>
            <select id="position" name="position" required>
                <option value="">请选择职位</option>
                <option value="manager">管理员</option>
                <option value="attendant">加油员</option>
                <option value="cashier">收银员</option>
                <option value="other">其他</option>
            </select>

            <label for="hireDate">入职日期：</label>
            <div class="datetime-group">
                <input type="date" id="hireDate" name="hireDate" required>
                <input type="time" id="hireTime" name="hireTime" required>
            </div>
            <div class="format-hint">格式示例：2020-03-15 00:00:00</div>

            <input type="submit" value="注册" id="submitBtn" disabled>

            <div class="login-link">
                已有账号？<a href="index">登录→</a>
            </div>
        </form>
    </div>
</div>

<script>
    // 密码一致性验证
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');
    const passwordHint = document.getElementById('passwordHint');
    const submitBtn = document.getElementById('submitBtn');
    const form = document.getElementById('registerForm');

    function checkPassword() {
        if (password.value === '' || confirmPassword.value === '') {
            passwordHint.textContent = '';
            submitBtn.disabled = true;
            return;
        }
        if (password.value === confirmPassword.value) {
            passwordHint.textContent = '密码一致';
            passwordHint.className = 'password-hint hint-success';
            submitBtn.disabled = false;
        } else {
            passwordHint.textContent = '密码不一致，请重新输入';
            passwordHint.className = 'password-hint hint-error';
            submitBtn.disabled = true;
        }
    }

    // 实时监听输入变化
    password.addEventListener('input', checkPassword);
    confirmPassword.addEventListener('input', checkPassword);

    // 日期时间格式处理
    form.addEventListener('submit', function(e) {
        const date = document.getElementById('hireDate').value;
        const time = document.getElementById('hireTime').value;
        if (date && time) {
            const formattedTime = time.replace(/:/g, '.');
            const formattedDateTime = `${date} ${formattedTime}`;
            // 无需额外处理，后端会解析
        }
    });
</script>
</body>

</html>